import type { ProFieldFCMode } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-components';
import { ProField, ProForm, ProFormGroup, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { Descriptions, Radio, Space, Switch, Modal, message, Card } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useModel, history } from 'umi';
import { PatchUser } from '@/api/userInfo'
export default () => {
  const [state, setState] = useState<ProFieldFCMode>('read');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [readonly, setReadonly] = useState(false);
  const [plain, setPlain] = useState<boolean>(false);
  const { initialState, setInitialState } = useModel('@@initialState');
  const userinfo = initialState.currentUser.userinfo
  const [formData, setFormData] = useState({});
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <PageContainer>
      <Card>
        <Space>
          <Radio.Group
            onChange={(e) => {
              // setState(e.target.value as ProFieldFCMode)
              if (e.target.value = "edit") {
                // history.replace('/user/usersetting')
                setIsModalOpen(true)
              }
            }}
            value={state}
          >
            <Radio value="read">只读状态</Radio>
            <Radio value="edit">编辑状态</Radio>
          </Radio.Group>
          简约模式
          <Switch checked={plain} onChange={(checked) => setPlain(checked)} />

        </Space>
        <br />
        <br />
        <Descriptions column={2} size='default' bordered={!plain} >
          <Descriptions.Item label="用户头像" >
            <ProField
              text={initialState.currentUser.avatar}
              valueType="image"
              // mode={state}
              plain={plain}
            />
          </Descriptions.Item>
          <Descriptions.Item label="用户状态">
            <ProField
              text={userinfo.is_acyive = 1 ? 'closed' : 'open'}
              // mode={state}
              valueType="radioButton"
              valueEnum={{
                open: {
                  text: '未激活',
                  status: 'Error',
                },
                closed: {
                  text: '激活',
                  status: 'Success',
                }
              }}
            />
          </Descriptions.Item>
          <Descriptions.Item label="用户名">
            <ProField
              text={userinfo.username}
              valueType="text"
              // mode={state}
              plain={plain}
            />
          </Descriptions.Item>
          <Descriptions.Item label="昵称" >
            <ProField
              text={userinfo.name ? userinfo.name : '未设置'}
              mode={state}
              onChange={(value) => { console.log('---', value) }}
            // plain={plain} 
            />
          </Descriptions.Item>
          <Descriptions.Item label="加入时间">
            <ProField
              text={dayjs(userinfo.date_joined).valueOf()}
              valueType="dateTime"
            />
          </Descriptions.Item>
          <Descriptions.Item label="上次登录时间">
            <ProField
              text={dayjs(userinfo.last_login).valueOf()}
              valueType="dateTime"
            />
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            <ProField
              text={userinfo.sex ? userinfo.sex : '未知'}
              mode={state}
              valueType="text"
            />
          </Descriptions.Item>
          <Descriptions.Item label="年龄">
            <ProField text={userinfo.age ? userinfo.age : 18} valueType="digit" mode={state} plain={plain}
              onChange={(value) => handleFieldChange('age', value)} />
          </Descriptions.Item>
          <Descriptions.Item label="民族">
            <ProField text={userinfo.national ? userinfo.national : '汉族'} mode={state}
              onChange={(value) => handleFieldChange('national', value)} />
          </Descriptions.Item>
          <Descriptions.Item label="地址">
            <ProField text={userinfo.addr ? userinfo.addr : "广州市海珠区鸿洲国际酒店10楼"} valueType="text" mode={state} plain={plain}
              onChange={(value) => handleFieldChange('addr', value)} />
          </Descriptions.Item>
          <Descriptions.Item label="手机号">
            <ProField
              text={userinfo.tel ? userinfo.tel : '133333333'}
              valueType="digit"
              mode={state}
              plain={plain}
              onChange={(value) => handleFieldChange('tel', value)}
            />
          </Descriptions.Item>
          <Descriptions.Item label="@邮箱">
            <ProField
              text={userinfo.email ? userinfo.email : userinfo.username + "@qq.com"}
              valueType="text"
              mode={state}
              plain={plain}
              onChange={(value) => handleFieldChange('email', value)}
            />
          </Descriptions.Item>

          <Descriptions.Item label="个性签名">
            <ProField
              text={userinfo.id % 2 === 1
                ? '在月光下，一直找寻，那想念的身影~'
                : '路灯下，你的身影，模糊且看不清晰~'}
              valueType="text"
              mode={state}
              plain={plain}
              onChange={(value) => handleFieldChange('com', value)}
            />
          </Descriptions.Item>

        </Descriptions>
        <Modal width={888} title="创建活动表单" open={isModalOpen} onCancel={handleCancel} footer={null}>
          <div
            style={{
              padding: 24,
            }}
          >
            <Switch
              style={{
                marginBlockEnd: 16,
              }}
              checked={readonly}
              checkedChildren="编辑"
              unCheckedChildren="只读"
              onChange={setReadonly}
            />
            <ProForm
              readonly={readonly}
              name="validate_other"
              initialValues={{
                // name: 'qixian',
                // password: '1ixian',
              }}
              onValuesChange={(_, values) => {
                // console.log(values);
              }}
              onFinish={async (value) => {
                console.log(value, initialState.currentUser.userinfo.id)
                // 
                try {
                  const data = await PatchUser(initialState.currentUser.userinfo.id, value)
                  // console.log(data)
                  setInitialState({
                    ...initialState,
                    currentUser: {
                      ...initialState.currentUser,
                      "userinfo": data,
                      //   "name":info.results[0].username,
                      //   "permissionslist":data,
                      //   "avatar":"https://aos-cdn-image.amap.com/pp/avatar/8f1/93/02/1115145147.jpg"
                    }
                  }
                  )
                  message.success("修改成功~")
                  setIsModalOpen(false)
                  // history.replace('/user/userinfo')
                } catch (err) {
                  message.error("修改失败！")
                }
              }
              }
            >
              <ProFormGroup title="个人基础信息修改~">
                <ProFormText width="md" name="name" label="昵称" />
                {/* <ProFormText.Password width="md" name="password" label="密码" /> */}
                {/* <ProFormText width="md" name="sex" label="性别" /> */}
                <ProFormSelect
                  name="sex"
                  width="md"
                  label="性别"
                  valueEnum={{
                    男: '男',
                    女: '女',
                  }}
                  placeholder="Please select"
                />
                <ProFormText width="md" name="age" label="年龄" />
                <ProFormText width="md" name="national" label="民族" />
                <ProFormText width="md" name="addr" label="地址" />
                <ProFormText width="md" name="tel" label="手机号" />
                <ProFormText width="md" name="email" label="邮箱" />
                <ProFormText width="md" name="com" label="个性签名" />
              </ProFormGroup>
            </ProForm>
          </div>
        </Modal>
      </Card>

    </PageContainer>

  );
};